<template>
<el-card style="height: 100%;">

  <div style="margin-left: 20px;width: 650px;">
    <el-radio-group v-model="date2">
      <el-radio-button label="今日"@change="handleRadioChange('today')"  />
      <el-radio-button label="昨日"@change="handleRadioChange('yesterday')" />
      <el-radio-button label="本周"@change="handleRadioChange('week')"  />
      <el-radio-button label="本月"@change="handleRadioChange('month')"  />
      <el-radio-button label="上月"@change="handleRadioChange('lastMonth')"  />
      <el-radio-button label="自定义时间"  @change="handleRadioChange('custom')" />
    </el-radio-group>
     <el-date-picker
         v-if="isCustomDate"
          v-model="dateg"
          type="daterange"
          placeholder="请选择"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
          style="width: 200px;float: right ;"
        />
  </div>
  <hr style="margin-top: 20px;height: 0.5px; border: none; background-color: #e5e7eb;"></hr>

  <div style="margin-top: 20px;">

 <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="出入库单号:">
      <el-input v-model="formInline.inoutid" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="出入库类型:">
      <el-select
        v-model="formInline.typeid"
        placeholder="请选择"
        clearable
      >
        <el-option v-for="i in code" :label="i.typename" :value="i.typeid" />
      </el-select>
    </el-form-item>

    <el-form-item label="仓库名称:">
      <el-select
        v-model="formInline.warehouseid"
        placeholder="请选择"
        clearable
      >
        <el-option v-for="i in ckdata" :label="i.warehousename" :value="i.warehouseid" />
      </el-select>
    </el-form-item>

    <el-form-item label="货品编码:">
      <el-input v-model="formInline.itemid" placeholder="请输入" clearable />
    </el-form-item>

    <el-form-item label="&#160&#160&#160货品类型:">
      <el-select
        v-model="formInline.itemtypeid"
        placeholder="请选择"
        clearable
      >
        <el-option v-for="i in itemtype" :label="i.itemtypename" :value="i.itemtypeid" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  </div>

<hr style="margin-top: 10px;height: 0.5px; border: none; background-color: #e5e7eb;"></hr>
<div style="margin: 20px 0px 20px 0px;">
<tr>
<td><el-card style="width: 510px;height: 100px;">

<tr>
  <td style="flex:1; text-align:center; padding-left: 20px;"><div style="font-size: 28px; color: #00BFFF;">{{tableData.rNum+tableData.cNum}}</div><div>出入库单数量</div></td>
  <td style="flex:1; text-align:center; padding-left: 80px;"><div style="font-size: 28px; color: #00BFFF;">{{tableData.rNum}}</div><div>入库单数量</div></td>
  <td style="flex:1; text-align:center; padding-left: 80px;"><div style="font-size: 28px; color: #00BFFF;">{{ tableData.cNum }}</div><div>出库单数量</div></td>
</tr>

</el-card></td>
<td><el-card style="width: 875px;height: 100px;margin-left: 20px;">
<tr>
  <td style="flex:1; text-align:center; padding-left: 60px;"><div style="font-size: 28px; color: green;">{{tableData.rQuantity}}</div><div>入库数量</div></td>
  <td style="flex:1; text-align:center; padding-left: 150px;"><div style="font-size: 28px; color: green;">{{tableData.rAmount}}</div><div>入库金额</div></td>
  <td style="flex:1; text-align:center; padding-left: 150px;"><div style="font-size: 28px; color: orange;">{{tableData.cQuantity}}</div><div>出库数量</div></td>
  <td style="flex:1; text-align:center; padding-left: 150px;"><div style="font-size: 28px; color: orange;">{{tableData.cAmount}}</div><div>出库金额</div></td>
</tr>
</el-card></td>
</tr>
</div>

 <el-table :data="tableData.output" stripe border style="width: 100%">
    <el-table-column fixed type="index" label="序号" width="55"/>
    <el-table-column fixed prop="inoutid" label="出入库单号" width="180" />
    <el-table-column fixed prop="inoutdate" label="出入库时间" width="180">
      <template v-slot="date">
        <span>{{ moment(date.row.inoutdate).format("YYYY年MM月DD日") }}</span>
      </template>
    </el-table-column>
    <el-table-column fixed prop="typeName" label="出入库类型" width="180" />
    <el-table-column prop="warehouseName" label="仓库名称" width="180"/>
    <el-table-column prop="librarylocationName" label="库位名称" width="180" />
    <el-table-column prop="itemid" label="货品编号" width="180"/>
    <el-table-column prop="itemname" label="货品名称" width="180" />
    <el-table-column prop="itemspec" label="规格型号" width="180"/>
    <el-table-column prop="unitName" label="单位" width="180" />
    <el-table-column prop="itemtypename" label="货品类型" width="180"/>
    <el-table-column prop="prices" label="入库单价" width="180" >
      <template v-slot="rprice">
        <span>{{rprice.row.direction==2?"":rprice.row.prices}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="quantity" label="入库数量" width="180">
      <template v-slot="rquantity">
        <span>{{rquantity.row.direction==2?"":rquantity.row.quantity}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="prices" label="出库单价" width="180" >
      <template v-slot="cprice">
        <span>{{cprice.row.direction==1?"":cprice.row.prices}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="quantity" label="出库数量" width="180">
      <template v-slot="cquantity">
        <span>{{cquantity.row.direction==1?"":cquantity.row.quantity}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="handempName" label="经办人" width="180" />
  </el-table>


</el-card>
</template>

<script setup lang="ts">
import axios from 'axios';
import dayjs from 'dayjs';
import moment from 'moment';
import { onMounted, reactive, ref, watch } from 'vue';
const date2=ref('今日'
)
const date = ref({
    date:''
})
const dateg=ref()
const isCustomDate=ref()

onMounted(()=>{
  handleRadioChange('today')
  getck();
  getcode();
  getitemtype();
})

const getlist=()=>{
    console.log(date.value.date)
    axios.get("api/app/inventory-records?date="+date.value.date+"&Inoutid="+formInline.inoutid+"&Typeid="+formInline.typeid+"&Warehouseid="+formInline.warehouseid+"&Itemid="+formInline.itemid+"&Itemtypeid="+formInline.itemtypeid).then(res=>{
    tableData.value=res.data.data
    })
}
const ckdata=ref([{
  warehousename:'',
  warehouseid:''
}])
const getck=()=>{
  axios.get("api/app/allot/ware-house").then(res=>{
    ckdata.value=res.data.data;
  })
}


const handleDateChange=()=>{
   // 取出要处理的日期数组
  const dateArr = Array.from(dateg.value); 
  if (dateArr.length < 2) {
    console.log('日期数据不完整');
    return;
  }
  const format = (dateObj:any) => {
    const year = dateObj.getFullYear();
    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
    const day = String(dateObj.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };
  date.value.date = `${format(dateArr[0])},${format(dateArr[1])}`;
  getlist()
}



 const handleRadioChange=(value:any)=> {
     if(value=='custom'){
isCustomDate.value =true;
return;
     }
    isCustomDate.value=false;
    let targetDate = '';
    if (value === 'today') {
      // 今日：当前日期
      targetDate = [dayjs().format('YYYY-MM-DD')].toString();
    } else if (value === 'yesterday') {
      // 昨日：前一天
      const yesterday = dayjs().subtract(1, 'day');
      targetDate = [yesterday.format('YYYY-MM-DD')].toString();
    } else if (value === 'week') {
      // 本周：周一至周日
      const startOfWeek = dayjs().startOf('week').add(1, 'day'); // 周一
      const endOfWeek = dayjs().endOf('week').add(1, 'day');     // 周日
      targetDate = [startOfWeek.format('YYYY-MM-DD'), endOfWeek.format('YYYY-MM-DD')].toString();
    } else if (value === 'month') {
      // 本月：1号至最后一天
      const startOfMonth = dayjs().startOf('month');
      const endOfMonth = dayjs().endOf('month');
      targetDate = [startOfMonth.format('YYYY-MM-DD'), endOfMonth.format('YYYY-MM-DD')].toString();
    } else if (value === 'lastMonth') {
      // 上月：上个月1号至最后一天
      const prevMonth = dayjs().subtract(1, 'month');
      const startOfPrevMonth = prevMonth.startOf('month');
      const endOfPrevMonth = prevMonth.endOf('month');
      targetDate = [startOfPrevMonth.format('YYYY-MM-DD'), endOfPrevMonth.format('YYYY-MM-DD')].toString();
    }
    // 把处理好的日期赋值给绑定变量，用于后续查询
    date.value.date = targetDate; 
    getlist();
  }

const formInline = reactive({
  inoutid: '',
  typeid: '',
  warehouseid: '',
  itemid: '',
  itemtypeid: '',
})

const onSubmit = () => {
  getlist();
}



const tableData =ref (
{
    "rQuantity": 15,
    "rAmount": "",
    "cQuantity": 20,
    "cAmount": "",
    "cNum": 1,
    "rNum": 1,
    "output": [
      {
        "direction": 1,
        "inoutid": "",
        "inoutdate": "",
        "typeName": "",
        "warehouseName": "",
        "librarylocationName": "",
        "itemid": "",
        "itemname": "",
        "unitName": "",
        "itemtypename": "",
        "quantity": "",
        "prices": "",
        "amount": "",
        "handempName": "",
        "itemspec": "",
        "lastModificationTime": null,
        "lastModifierId": null,
        "creationTime": "",
        "creatorId": null,
        "id": ""
      }]
}

)


const getcode=()=>{
  axios.get("api/app/location/code-list").then(res=>{
    code.value=res.data.data
  })
}

const getitemtype=()=>{
  axios.get("api/app/item/item-type").then(res=>{
    itemtype.value=res.data.data
  })
}
const code=ref([{
      "typeid": "",
      "typename": ""
}])

const itemtype=ref([{
      "itemtypeid": "",
      "itemtypename": "",
}])
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>